<template>
    <div class="head">
       <div class="menuBox">
        <div class="headName">金水方数据大屏</div>
       </div>
       <div class="time">
          <p>{{date}}</p>
          <p>{{week}}</p>
          <span>{{time}}</span>
       </div>
    </div>
</template>
  
  <script>
  import moment from 'moment';
  import 'moment/locale/zh-cn'; 
  moment.locale('zh-cn'); 
export default {
  data() {
    return {
        week: '',
        date: '',
        time: '',
        timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.getTime();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getTime() {
        this.week = moment().format('dddd');
        this.date = moment().format('YYYY.MM.DD');
        this.time = moment().format('HH:mm:ss');
    },
  },
};
</script>
  
<style lang="scss" scope>
  $vw: 100 / 1080 * 1vh;
  .head {
    width: 100%;
    height: 74*$vw;
    background: url(~@/assets/image/title_bg.png) no-repeat;
    background-size: 100% 108*$vw;
    background-position: 0 -9*$vw;
    position: relative;
    .time {
        position: absolute;
        right: 40*$vw;
        top: 12*$vw;
        display: flex;
        align-items: center;
            p {
              font-size: 20*$vw;
                color: #45A2FF;
                letter-spacing: 0;
                text-align: justify;
                font-weight: 500;
                margin-right: 40*$vw;
            }
            span {
                color: #ffffff;
                letter-spacing: 0;
                text-align: justify;
                font-size: 20*$vw;
                font-weight: 500;
                text-shadow: 0*$vw 0*$vw 13*$vw rgba(27, 126, 242, 0.91);
            }
    }
    .menuBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        .headName {
            height: 68*$vw;
            font-weight: bold;
            line-height: 68*$vw;
            font-size: 38*$vw;
            letter-spacing: 4*$vw;
            color: #FFFFFF;
            text-shadow: 0*$vw 4*$vw 21*$vw rgba(27, 126, 242, 0.64);
        }
    }
  }

</style>
  
  